<template>
	<view class="center">
		<u-toast ref="uToast" />
		<u-form :model="form" ref="uForm">
			<u-form-item label-width="160rpx" prop="avatar">
				<view style="display: flex; justify-content: center; align-items: center; width: 100%;">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u-image class="avatar" :src="form.avatar" mode="widthFix"></u-image>
					</button>
				</view>
			</u-form-item>
			<u-form-item label="昵称:" label-width="160rpx" label-align="right" prop="nickname">
				<view style="display: flex; justify-content: center; align-items: center; width: 100%;">
					<input type="nickname" v-model="form.nickname" placeholder="请输入昵称" @blur="userNameInput" />
				</view>
			</u-form-item>
		</u-form>
		<view style="margin-top: 40rpx;">
			<u-button shape="circle" type="primary" :custom-style="customStyle" @click="editPersonInfo">确认提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		editPersonalInfo
	} from "@/api/my.js";
	import {
		ossImage
	} from "../../utils/ossUpload";
	export default {
		data() {
			return {
				editPhone: false,
				form: {
					avatar: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/uploads/2023-07-29/miniMan.png',
					nickname: '',
				},
				rules: {
					avatar: [{
						required: true,
						message: '请上传头像',
						trigger: 'blur'
					}],
					nickname: [{
						required: true,
						message: '请输入昵称',
						trigger: 'change'
					}],
				},
				customStyle: {
					width: '80%',
				},
				info: {}
			}
		},
		onLoad(option) {
			let info = JSON.parse(decodeURIComponent(option.info));
			if (info) {
				this.form.avatar = info.avatar
				this.form.nickname = info.nickname
				this.info = info
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			onChooseAvatar(e) {
				this.form.avatar = e.detail.avatarUrl
				ossImage(e.detail.avatarUrl).then(res => {
					this.form.avatar = res
				}).catch(err => {
					this.$refs.uToast.show({
						title: '上传失败',
						icon: false,
						type: 'error'
					})
				})
			},
			userNameInput(e) {
				this.form.nickname = e.detail.value
			},
			getUserInfos() {
				getUserInfo({
						userId: uni.getStorageSync('userId')
					})
					.then((res) => {
						this.form.avatar = res.data.avatar
						this.form.nickname = res.data.nickname
					}).catch((err) => {
						this.$refs.uToast.show({
							title: err.msg,
							icon: false,
							type: 'error'
						})
					});
			},
			editPersonInfo() {
				this.$refs.uForm.validate(valid => {
					let editForm = JSON.parse(JSON.stringify(this.form))
					editForm.id = uni.getStorageSync('snId'),
						editForm.userId = uni.getStorageSync('userId'),
						editForm.last_ip = uni.getStorageSync('Ip')
					if (valid) {
						editPersonalInfo({
							userId: uni.getStorageSync("userId"),
							lastIp: uni.getStorageSync('Ip'),
							avatar: this.form.avatar,
							nickname: this.form.nickname
						}).then(res => {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							})
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								icon: false,
								type: 'error'
							})
						})
					} else {
						console.Console('未验证通过')
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-wrapper {
		border: none !important;
		width: 200rpx;
		height: 200rpx;
		padding: 0 !important;
		background: none;

		.avater {
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>